/**
 * desc：  单页面入口
 * author：DestinyJun
 * date：  2020/4/21 17:01
 */
import React, {Component} from 'react';
import { Route, Switch, Link} from "react-router-dom";
import './Layouts.scss';
import {Layout, Menu, Breadcrumb, Avatar, Badge} from 'antd';
import {
  UserOutlined,
  CopyrightOutlined,
  BellOutlined,
  PoweroffOutlined, MailOutlined,
} from '@ant-design/icons';
import {Area} from "../Area/Area";
import {Home} from "../Home/Home";
import {Disease} from "../Disease/Disease";
import {Evolution} from "../Evolution/Evolution";
import {CountyRate} from "../CountyRate/CountyRate";
import {Store} from "../../redux/store";
import {loginOut} from "../../redux/action";
import {SystemSet} from "../SystemSet/SystemSet";
const { Header, Content, Sider, Footer } = Layout;

export class Layouts extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  // 生命周期
  componentDidMount() {}

  // 渲染
  render() {
    const path = this.props.path;
    const url = this.props.path;
    return (
      <Layout>
        <Header className="header">
          <div className="logo" >
            <h2>防疫云</h2>
          </div>
          <div className="info">
            <Badge count={1} dot>
              <BellOutlined style={{fontSize: '24px', color: 'white'}} />
            </Badge>
            <Avatar size="large" src={"/immunity-cloud-admin/images/秀智1.jpg"} />
            <PoweroffOutlined onClick={() => {Store.dispatch(loginOut());}} title={'退出'} style={{fontSize: '24px', color: '#FF4D4F'}} />
          </div>
        </Header>
        <Layout className={"center"}>
          <Sider breakpoint="lg" className="sidebar-left">
            <Menu
              mode="inline"
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              style={{ height: '100%', borderRight: 0 }}
            >
              <Menu.Item icon={<UserOutlined />}>
                <Link to={`${url}`}>系统首页</Link>
              </Menu.Item>
              <Menu.Item  icon={<MailOutlined />}>
                <Link to={`${url}/area`}>区域管理</Link>
              </Menu.Item>
              <Menu.Item  icon={<MailOutlined />}>
                <Link to={`${url}/evolution`}>演化管理</Link>
              </Menu.Item>
              <Menu.Item  icon={<MailOutlined />}>
                <Link to={`${url}/disease`}>传染病管理</Link>
              </Menu.Item>
              <Menu.Item  icon={<MailOutlined />}>
                <Link to={`${url}/rate`}>转阳率管理</Link>
              </Menu.Item>
              <Menu.Item  icon={<MailOutlined />}>
                <Link to={`${url}/system`}>系统设置</Link>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout className={'content'}>
            <Breadcrumb className={'content-bread'}>
              <Breadcrumb.Item>防疫云</Breadcrumb.Item>
            </Breadcrumb>
            <Content className="content-body">
              <Switch>
                <Route exact path={path} component={Home} />
                <Route exact path={`${path}/area`} component={Area} />
                <Route exact path={`${path}/disease`} component={Disease} />
                <Route exact path={`${path}/evolution`} component={Evolution} />
                <Route exact path={`${path}/rate`} component={CountyRate} />
                <Route exact path={`${path}/system`} component={SystemSet} />
              </Switch>
            </Content>
          </Layout>
        </Layout>
        <Footer className={"footer"}>
          <h3>Copyright<CopyrightOutlined />防疫云</h3>
        </Footer>
      </Layout>
    );
  }
}
